iT邦幫忙

2023 iThome 鐵人賽

DAY 10
0
Modern Web

你應該要知道的CSS技巧:發掘被忽略但實用的屬性系列 第 10

【Day10】讓排版更簡單的RWD新利器 - CSS container

  • 分享至 

  • xImage
  •  

CSS container

CSS container支援度:Can I Use)
CSS @container支援度:Can I Use)

第一次知道CSS container是因為工作上需要,才會查到,情境如下:

.container{
    width:100%;
    height:30vh;
    .child{
       /* font-size須根據容器大小變化 */
       font-size:5cqh;
    }
    &.active{
       height:50vh;
       .child{
            /* font-size須根據容器大小變化 */
            font-size:10cqh;
       }
    }
}

雖然可以有其他方法做的到,但看到有這個新屬性就迫不及待研究看看。

CSS container是什麼?

  • 可以指定想要的元素為容器,並根據容器變化做相對應的變化
  • container屬性是container-typecontainer-name兩個屬性的縮寫,可以寫成container:container-type/container-name;
屬性
container-type normal:如果設定normal,後代元素只能查詢容器樣式,容器尺寸將不能查詢,亦不能應用。
container-type inline-size:設定inline-size,則只會查詢容器的inline尺寸,
container-type size,設定size則inline尺寸及block尺寸都可以查詢。
container-name 預設值default ;不用使用引號('name');可以使用CSS變數(--variable);可以multiple name,需用空格隔開(name1 name2)

CSS Container Unit是什麼?

容器的單位尺寸,與可視區(ViewPort)單位語法與意義相似;
可視區的單位vw、vh、vmin、vmax相似,可對應到cqw、cqh、cqmin、cqmax。

屬性
cqw 表示容器寬度單位(container query width)。1cqw=1%容器寬度。ex:容器100px寬,1cqw=1px。
cqi 表示容器inline-size單位(container query inline-size)。不特別設定下,inline-size通常指的是水平方向,對應的會是容器寬度,因此1cqi通常等於1cqw
cqh 表示容器寬度單位(container query height)。1cqh=1%容器高度。ex:容器100px高,1cqh=1px。
cqb 表示容器block-size單位(container query block-size)。不特別設定下,block-size通常指的是垂直方向,對應的會是容器高度,因此1cqb通常等於1cqh
cqmin 表示容器較小尺寸的單位,ex:容器為寬1000px高800px的容器,較小邊是高800px,這時1qmin=1%容器高=8px。
cqmax 表示容器較大尺寸的單位,ex:容器為寬1000px高800px的容器,較大邊是寬1000px,這時1qmax=1%容器寬=10px。

這篇提到,如果你的容器設定在自適應寬度,像是flex的子元素、abosulte的元素(子元素用自身撐abosulte父元素)、float元素、或是width設定fit-content的元素,container寬度都會為0,因此container相關的設定都會無法作用,2023/09/24實測一樣無作用。

CSS @container是什麼?

  • CSS @container是一種新的容器查詢,可以根據容器大小或計算樣式的變化來改變樣式
  • @media媒體查詢用法類似,@media匹配的是瀏覽器視窗,@cintainer則是某個指定元素
  • 可以根據容器大小調整後代元素的大小或樣式規則
  • 可以根據容器的內容調整後代元素的樣式
  • 可以根據容器的計算樣式調整後代元素的樣式

Codepen範例

IT15-Day10-CSS @container

參考來源


上一篇
【Day09】寬高尺寸傻傻分不清楚: inline-size 和 block-size
下一篇
【Day11】讓你的字體大小更流暢 - CSS clamp()
系列文
你應該要知道的CSS技巧:發掘被忽略但實用的屬性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言